<template>
  <router-view v-slot="{ Component }">
    <transition :name="trans">
      <component :is="Component" />
    </transition>
  </router-view>
  <div class="footer">
    <p>© 2024.11 Designed by JiChuan v1.0.0alpha</p>
  </div>
</template>
<script setup lang="ts">
import { useRouter, RouterView } from 'vue-router'
import { ref } from 'vue';

let trans = ref();
let router = useRouter();
window.addEventListener('click', (e: MouseEvent) => {
    const pointer = document.createElement('div')
    pointer.classList.value = 'pointer'
    pointer.style.top = `${e.clientY}px`
    pointer.style.left = `${e.clientX}px`
    pointer.style.transform = "translate(-50%, -50%)"
    document.body.appendChild(pointer)

    pointer.addEventListener('animationend', () => {
        pointer.remove()
    });
})
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.pointer {
    position: absolute;
    border-radius: 50%;
    /* 确保形状为圆形 */
    background-color: rgba(224, 224, 224, 0.8);
    /* 半透明红色作为示例，可以根据需要调整 */
    opacity: 0;
    /* 初始不显示，动画开始时会逐渐显现 */
    z-index: 999;
    /* 确保圆圈在最上层 */
    animation: grow 0.4s forwards;
    /* 指定动画名称和持续时间 */
    pointer-events: none;
}


/* 动画关键帧，实现圈的扩大效果 */
@keyframes grow {
    from {
        width: 0;
        height: 0;
        opacity: 1;
    }

    to {
        width: 100px;
        /* 圈的最大直径 */
        height: 100px;
        opacity: 0;
    }
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: #3636367c;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  text-shadow: 1px 1px 1px #000;
  p {
    margin: 0;
    padding: 0;
    color: #bbbbbb;
  }
}
</style>
